<template>
    <div>
        <div class="box">
            <img :src="headPic" @click="my" alt="" class="img">
            <img src="../../assets/3.png" alt="" @click="message" class="img1">
        </div>
        <div class="box1">
            <div class="tab">
                <van-tabs>
                    <van-tab title="常见疾病">
                        <div class="box2">
                            <div class="left">
                                <div v-for="(item, index) in datalist" :key="item.id">
                                    <div @click="dian(item)" :class="{ on: actives === item.id }" class="kun">
                                        {{ item.departmentName }}
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div v-for="(item, index) in listdata" :key="item.id" class="fun"
                                    @click="tiao(item.id)">
                                    <div class="wen">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="常用药品">
                        <div class="box3">
                            <div class="zuo">
                                <div v-for="(item, index) in kunlist" :key="item.id">
                                    <div @click="ji(item)" :class="{ on: active === item.id }" class="kun">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                            <div class="you">
                                <div v-for="(item, index) in junlist" :key="item.id"  @click="tiao(item.id)" >
                                    <div class="ghj">
                                        <Lie/>
                                        <span>{{ item.name }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import router from '@/router';
import Lie from '@/components/Lie.vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

// 用于存储想要设置默认高亮的id值，这里假设为5，你可以替换成实际的id值
const defaultHighlightId = ref(5);
const actives = ref(2);
const selectedIndex = ref(0);
const route=useRoute();
// const cid=route.params.id;
const tiao = (id) => {
    router.push({ name: 'zhidetail', params: { id: id } })
}
const message = () => {
    router.push('/my_message');
    console.log('跳转到我的消息页');
};
const dian = (item) => {
    actives.value = item.id;
    getlist2(actives.value)
};
const ji = (item) => {
    active.value = item.id;
    getlist5(active.value)
};
const datalist = ref([]);
const listdata = ref([]);

const my = () => {
    router.push('/my');
};

const getlist = () => {
    axios.get(`/health/share/knowledgeBase/v1/findDepartment`).then((res) => {
        // console.log(cid);
        datalist.value = res.data.result;
        // console.log(datalist.value);
    });
};
getlist();
const kunlist = ref([]);
const getlist3 = () => {
    axios.get('/health/share/knowledgeBase/v1/findDrugsCategoryList').then((res) => {
        kunlist.value = res.data.result;
        // console.log(kunlist.value);
    });
};
getlist3();
const getlist2 = (actives) => {
    axios.get('/health/share/knowledgeBase/v1/findDiseaseCategory', {
        params: {
            departmentId: actives
        }
    }).then((res) => {
        listdata.value = res.data.result;
        console.log(listdata.value);
    });
}
getlist2(actives.value)
const active = ref(2);

const junlist = ref([]);
const getlist5 = (active) => {
    axios.get('/health/share/knowledgeBase/v1/findDrugsKnowledgeList', {
        params: {
            drugsCategoryId: active,
            page: 1,
            count: 10,
        }
    }).then((res) => {
        junlist.value = res.data.result;
        console.log(junlist.value);
    });
}
getlist5(active.value)
const headPic = localStorage.getItem('headpic')


</script>

<style scoped lang="scss">

.ghj{
    width: 125px; // 250px * 0.5
    height: 100px; // 200px * 0.5
    text-align: center;
    margin-top: 10px; // 20px * 0.5
    margin-left: 7.5px; // 15px * 0.5
}

.you{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}
.hhhh {
    color: blue;
}

.mn {
    margin-top: 15px; // 30px * 0.5
    margin-left: 1.5px; // 3px * 0.5
    color: blue;
}

.right {
    flex: 1;
    font-size: 15px; // 30px * 0.5
    line-height: 60px; // 120px * 0.5
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    height: 650px; // 1300px * 0.5
}
.fun{
    width: 135px; // 270px * 0.5
    height: 60px; // 120px * 0.5
    // background: pink
}
.wen {
    margin-left: 7.5px; // 15px * 0.5
}

.box2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    /* background: pink */
}

.box3 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    /* background: pink */
}

.on {
    background-color: #fff;
    border-left: 2.5px solid blue; // 5px * 0.5
    border-width: 5px; // 10px * 0.5
}

.zuo {
    width: 100px; // 200px * 0.5
    height: 100%;
    background-color: #eee;
}

.left {
    width: 100px; // 200px * 0.5
    height: 100%;
    background-color: #eee;
}

.kun {
    width: 100px; // 200px * 0.5
    height: 60px; // 120px * 0.5
    font-size: 15px; // 30px * 0.5
    text-align: center;
    line-height: 60px; // 120px * 0.5
}

.active {
    color: blue;
}

.box1 {
    width: 100%;
    height: 45px; // 90px * 0.5
    display: flex;
    border-bottom: 5px solid #eee; // 10px * 0.5
}

.yiyi {
    display: block;
}

.tab {
    width: 100%;
    height: 25px; // 50px * 0.5
}

.box {
    width: 100%;
    height: 65px; // 130px * 0.5
    border-bottom: 5.5px solid #eee; // 11px * 0.5
}

.img {
    width: 40px; // 80px * 0.5
    height: 40px; // 80px * 0.5
    margin-top: 15px; // 30px * 0.5
    margin-left: 10px; // 20px * 0.5
    border-radius: 50%;
}

.img1 {
    width: 25px; // 50px * 0.5
    height: 25px; // 50px * 0.5
    position: absolute;
    left: 335px; // 670px * 0.5
    top: 21.5px; // 43px * 0.5
}
</style>
